home *** CD-ROM | disk | FTP | other *** search
/ Personal Computer World 2006 May / PCWMAY06.iso / Software / Freeware / First Page 2006 3.00 / fp2006-final-3.00-setup.exe / {app} / Iscripts / Forms Misc / val-noalert.izs < prev    next >
Text File  |  2005-09-28  |  8KB  |  272 lines
  1. <!NOWIZARD>
  2.  
  3. <!TITLE>Validation (No Alert) 
  4.  
  5. <!/TITLE>
  6.  
  7. <!DESCRIPTION> Stop displaying those annoying alert boxes with your JavaScript form validation. This script uses images to display any error messages to the user <!/DESCRIPTION> 
  8.  
  9. <!CATEGORY>Forms<!/CATEGORY>
  10.  
  11. <!SCRIPT>
  12. <!-- START OF SCRIPT -->
  13.  
  14. <!-- HOW TO INSTALL VALIDATION (NO ALERT):
  15.  
  16.   1.  Copy code into the HEAD section of document
  17.   2.  Put last coding into the BODY section of document  -->
  18.  
  19. <!-- STEP ONE: Add code into HEAD section of document  -->
  20.  
  21. <HEAD>
  22.  
  23. <SCRIPT LANGUAGE="JavaScript">
  24. <!-- Original:  Jeff Harding (jbh@site-ations.com) -->
  25. <!-- Web Site:  http://www.site-ations.com -->
  26. <!-- Modified by:  Ronnie T. Moore, Editor -->
  27.  
  28.  
  29.  
  30. <!-- Begin
  31. // Preload images
  32. var empty = new Image(); empty.src = "fieldempty.gif";
  33. var email = new Image(); email.src = "emailerror.gif";
  34. var zipcd = new Image(); zipcd.src = "ziperror.gif";
  35. var phone = new Image(); phone.src = "phoneerror.gif";
  36.  
  37. var haveerrors = 0;
  38. function showImage(imagename, imageurl, errors) {
  39. document[imagename].src = imageurl;
  40. if (!haveerrors && errors) haveerrors = errors;
  41. }
  42.  
  43. function validateForm(f) {
  44. haveerrors = 0;
  45. (f.fname.value.length < 1) // validate first name length
  46. ? showImage("firstnameerror", "fieldempty.gif", true)   // no semi-colon after this line!
  47. : showImage("firstnameerror", "blankimage.gif", false); // true = errors, false = no errors
  48.  
  49. (f.lname.value.length < 1) // validate last name length
  50. ? showImage("lastnameerror", "fieldempty.gif", true)
  51. : showImage("lastnameerror", "blankimage.gif", false);
  52.  
  53. (f.zip.value.length != 5) // validate zip code length
  54. ? showImage("ziperror", "ziperror.gif", true)
  55. : showImage("ziperror", "blankimage.gif", false);
  56.  
  57. phonenumlength = f.area.value.length + 
  58. f.exchange.value.length + f.number.value.length;
  59.  
  60. (phonenumlength != 10) // validate phone number length
  61. ? showImage("phoneerror", "phoneerror.gif", true)
  62. : showImage("phoneerror", "blankimage.gif", false);
  63.  
  64. (f.email.value.search("@") == -1 || f.email.value.search("[.*]") == -1) // validate email
  65. ? showImage("emailerror", "emailerror.gif", true)
  66. : showImage("emailerror", "blankimage.gif", false);
  67.  
  68. return (!haveerrors);
  69. }
  70. //  End -->
  71. </script>
  72. </HEAD>
  73.  
  74. <!-- STEP TWO: Add code into BODY section of document  -->
  75.  
  76. <BODY>
  77.  
  78. <center>
  79. <form action="script.cgi" name="myform" onSubmit="return validateForm(this)">
  80. <table border=0 cellspacing=0 celpadding=0>    
  81. <tr>
  82. <td colspan=2>Enter your information:<br>
  83. <sup>(<font color="#ff0000">*</font> denotes required field).</sup></td>
  84. </tr>
  85. <tr>
  86. <td><p align=right>
  87. First Name:</td>
  88. <td>
  89. <input type=text name="fname" size=25 maxlength=50><font color="#ff0000">*</font><br>
  90. <img name=firstnameerror src="blankimage.gif" width=350 height=10 border=0></td>
  91. </tr>
  92. <tr>
  93. <td><p align=right>
  94. Last Name:</td>
  95. <td>
  96. <input type=text name="lname" size=25 maxlength=50><font color="#ff0000">*</font><br>
  97. <img name=lastnameerror src="blankimage.gif" width=350 height=10 border=0></td>
  98. </tr>    
  99. <tr>
  100. <td><p align=right>
  101. Zip Code:</td>
  102. <td>
  103. <input type=text name=zip size=25 maxlength=50><font color="#ff0000">*</font><br>
  104. <img name=ziperror src="blankimage.gif" width=350 height=10 border=0></td>
  105. </tr>
  106. <tr>
  107. <td><p align=right>
  108. Email:</td>
  109. <td>
  110. <input type=text name=email size=25 maxlength=50><font color="#ff0000">*</font><br>
  111. <img name=emailerror src="blankimage.gif" width=350 height=10 border=0></td>
  112. </tr>
  113. <tr>
  114. <td><p align=right>
  115. Phone:</td>
  116. <td>
  117. <input type=text name=area size=4 maxlength=5>-
  118. <input type=text name=exchange size=4 maxlength=3>-
  119. <input type=text name=number size=5 maxlength=4><font color="#ff0000">*</font><br>
  120. <img name=phoneerror src="blankimage.gif" width=350 height=10 border=0></td>
  121. </tr>
  122. <tr>
  123. <td colspan=2><p align=center>
  124.   <hr>
  125. </td>
  126. </tr>    
  127. <tr>
  128. <td><p align=center>
  129. </td>
  130. <td><p align=right>
  131. <input type=submit value="Submit Form"></td>
  132. </tr>
  133. </table>
  134. </form>
  135. </center>
  136.  
  137.  
  138. <!-- END OF SCRIPT -->
  139. <!/SCRIPT>
  140.  
  141. <!PREVIEW>
  142. <!-- START OF SCRIPT -->
  143.  
  144. <!-- HOW TO INSTALL VALIDATION (NO ALERT):
  145.  
  146.   1.  Copy code into the HEAD section of document
  147.   2.  Put last coding into the BODY section of document  -->
  148.  
  149. <!-- STEP ONE: Add code into HEAD section of document  -->
  150.  
  151. <HEAD>
  152.  
  153. <SCRIPT LANGUAGE="JavaScript">
  154. <!-- Original:  Jeff Harding (jbh@site-ations.com) -->
  155. <!-- Web Site:  http://www.site-ations.com -->
  156. <!-- Modified by:  Ronnie T. Moore, Editor -->
  157.  
  158.  
  159.  
  160. <!-- Begin
  161. // Preload images
  162. var empty = new Image(); empty.src = "fieldempty.gif";
  163. var email = new Image(); email.src = "emailerror.gif";
  164. var zipcd = new Image(); zipcd.src = "ziperror.gif";
  165. var phone = new Image(); phone.src = "phoneerror.gif";
  166.  
  167. var haveerrors = 0;
  168. function showImage(imagename, imageurl, errors) {
  169. document[imagename].src = imageurl;
  170. if (!haveerrors && errors) haveerrors = errors;
  171. }
  172.  
  173. function validateForm(f) {
  174. haveerrors = 0;
  175. (f.fname.value.length < 1) // validate first name length
  176. ? showImage("firstnameerror", "fieldempty.gif", true)   // no semi-colon after this line!
  177. : showImage("firstnameerror", "blankimage.gif", false); // true = errors, false = no errors
  178.  
  179. (f.lname.value.length < 1) // validate last name length
  180. ? showImage("lastnameerror", "fieldempty.gif", true)
  181. : showImage("lastnameerror", "blankimage.gif", false);
  182.  
  183. (f.zip.value.length != 5) // validate zip code length
  184. ? showImage("ziperror", "ziperror.gif", true)
  185. : showImage("ziperror", "blankimage.gif", false);
  186.  
  187. phonenumlength = f.area.value.length + 
  188. f.exchange.value.length + f.number.value.length;
  189.  
  190. (phonenumlength != 10) // validate phone number length
  191. ? showImage("phoneerror", "phoneerror.gif", true)
  192. : showImage("phoneerror", "blankimage.gif", false);
  193.  
  194. (f.email.value.search("@") == -1 || f.email.value.search("[.*]") == -1) // validate email
  195. ? showImage("emailerror", "emailerror.gif", true)
  196. : showImage("emailerror", "blankimage.gif", false);
  197.  
  198. return (!haveerrors);
  199. }
  200. //  End -->
  201. </script>
  202. </HEAD>
  203.  
  204. <!-- STEP TWO: Add code into BODY section of document  -->
  205.  
  206. <BODY>
  207.  
  208. <center>
  209. <form action="script.cgi" name="myform" onSubmit="return validateForm(this)">
  210. <table border=0 cellspacing=0 celpadding=0>    
  211. <tr>
  212. <td colspan=2>Enter your information:<br>
  213. <sup>(<font color="#ff0000">*</font> denotes required field).</sup></td>
  214. </tr>
  215. <tr>
  216. <td><p align=right>
  217. First Name:</td>
  218. <td>
  219. <input type=text name="fname" size=25 maxlength=50><font color="#ff0000">*</font><br>
  220. <img name=firstnameerror src="blankimage.gif" width=350 height=10 border=0></td>
  221. </tr>
  222. <tr>
  223. <td><p align=right>
  224. Last Name:</td>
  225. <td>
  226. <input type=text name="lname" size=25 maxlength=50><font color="#ff0000">*</font><br>
  227. <img name=lastnameerror src="blankimage.gif" width=350 height=10 border=0></td>
  228. </tr>    
  229. <tr>
  230. <td><p align=right>
  231. Zip Code:</td>
  232. <td>
  233. <input type=text name=zip size=25 maxlength=50><font color="#ff0000">*</font><br>
  234. <img name=ziperror src="blankimage.gif" width=350 height=10 border=0></td>
  235. </tr>
  236. <tr>
  237. <td><p align=right>
  238. Email:</td>
  239. <td>
  240. <input type=text name=email size=25 maxlength=50><font color="#ff0000">*</font><br>
  241. <img name=emailerror src="blankimage.gif" width=350 height=10 border=0></td>
  242. </tr>
  243. <tr>
  244. <td><p align=right>
  245. Phone:</td>
  246. <td>
  247. <input type=text name=area size=4 maxlength=5>-
  248. <input type=text name=exchange size=4 maxlength=3>-
  249. <input type=text name=number size=5 maxlength=4><font color="#ff0000">*</font><br>
  250. <img name=phoneerror src="blankimage.gif" width=350 height=10 border=0></td>
  251. </tr>
  252. <tr>
  253. <td colspan=2><p align=center>
  254.   <hr>
  255. </td>
  256. </tr>    
  257. <tr>
  258. <td><p align=center>
  259. </td>
  260. <td><p align=right>
  261. <input type=submit value="Submit Form"></td>
  262. </tr>
  263. </table>
  264. </form>
  265. </center>
  266.  
  267.  
  268. <!-- END OF SCRIPT -->
  269. <!/PREVIEW>
  270.  
  271. <!RELATED>val-no-alert.zip<!/RELATED>
  272.